<template>
  <div class="addressEdit">
    <Header left="arrow" title="地址编辑"></Header>
    <van-address-edit
      ref="addressEdit"
      :area-list="areaList"
      :show-postal="false"
      show-set-default
      show-search-result
      :search-result="searchResult"
      :area-columns-placeholder="['请选择', '请选择', '请选择']"
      @save="onSave"
      @delete="onDelete"
      @change-detail="onChangeDetail"
      @select-search="selectSearch"
    >
      <van-field
        name="radio"
        label="性别"
        :rules="[{ required: true, message: '请选择性别' }]"
      >
        <template #input>
          <van-radio-group v-model="gender" direction="horizontal">
            <van-radio checked-color="#dba871" name="1">先生</van-radio>
            <van-radio checked-color="#dba871" name="2">女士</van-radio>
          </van-radio-group>
        </template>
      </van-field></van-address-edit
    >
    <!-- 弹出层 -->
    <van-popup v-model="show" position="bottom" :style="{ height: '9.2rem' }">
      <van-area
        title="标题"
        :area-list="areaList"
        :columns-placeholder="['请选择', '请选择', '请选择']"
      />
    </van-popup>
  </div>
</template>
<script>
import addressApi from "@/api/address";
import Vue from "vue";
import {
  AddressEdit,
  Toast,
  Area,
  Popup,
  RadioGroup,
  Radio,
  Field,
} from "vant";

Vue.use(AddressEdit)
  .use(Toast)
  .use(Popup)
  .use(Area)
  .use(RadioGroup)
  .use(Radio)
  .use(Field);
import areaListdb from "@/assets/db.js";
import Header from "@/components/Header";
export default {
  name: "addressEdit",
  components: {
    Header,
  },
  mounted() {
    // this.$refs.addressEdit.data.name = "金理军"
  },
  data() {
    return {
      searchResult: [],
      show: false,
      gender: false,
      lng: "",
      lat: "",
    };
  },
  computed: {
    areaList() {
      return areaListdb;
    },
    userInfo() {
      return this.$store.getters.userInfo;
    },
  },
  methods: {
    onSave() {
      var addressEdit = this.$refs.addressEdit.data;
      console.log(addressEdit);
      var formData = new FormData();
      formData.append("areaCode", addressEdit.areaCode);
      formData.append("addressDetail", addressEdit.addressDetail);
      formData.append("province", addressEdit.province);
      formData.append("city", addressEdit.city);
      formData.append("county", addressEdit.county);
      formData.append("name", addressEdit.name);
      formData.append("tel", addressEdit.tel);
      formData.append("userId", this.userInfo.userId);
      if (addressEdit.isDefault) {
        formData.append("isDefault", 1);
      } else {
        formData.append("isDefault", 0);
      }
      formData.append("lng", this.lng);
      formData.append("lat", this.lat);
      addressApi.insertAddress(formData).then((response) => {
        // console.log("地址提交", response.data.code);
        this.$router.go(-1)
      });
      Toast("保存");
    },
    onDelete() {
      Toast("delete");
    },
    onChangeDetail(val) {
      console.log("当前城市：", this.$refs.addressEdit.data.city);
      var city = this.$refs.addressEdit.data.city;
      if (val) {
        //有数字就进行查询
        const self = this;
        AMap.plugin("AMap.Autocomplete", function () {
          // 实例化Autocomplete
          console.log("限定城市:" + city);
          var autoOptions = {
            //city 限定城市，默认全国
            city: city,
          };
          var autoComplete = new AMap.Autocomplete(autoOptions);
          autoComplete.search(val, function (status, result) {
            // 搜索成功时，result即是对应的匹配数据
            console.log(
              result.tips[0].location.lng,
              "  ",
              result.tips[0].location.lat
            );
            self.lng = result.tips[0].location.lng;
            self.lat = result.tips[0].location.lat;
            self.searchResult = result.tips;
          });
        });
      } else {
        this.searchResult = [];
      }
    },
    selectSearch(value) {
      console.log("选中", value);
    },
    showPopup() {
      this.show = true;
    },
    onConfirm(value) {
      console.log(value);
    },
  },
};
</script>
<style scoped>
.addressEdit {
  padding-top: 2.13rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #f6f6f6;
}
::v-deep .van-switch {
  font-size: 24px !important;
}
::v-deep .van-switch--on {
  background-color: #dba871;
}
::v-deep .van-button--danger {
  color: #fff;
  background-color: #dba871;
  border: 0.02667rem solid #dba871;
}
.editForm {
  box-sizing: border-box;
  margin: 0.3rem 0.5rem 0.5rem 0.5rem;
  background-color: #fff;
  border-radius: 10px;
}
.submitBtn {
  margin: 0.3rem 0.5rem 0 0.5rem;
}
</style>